<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flash-container {
            width: 148px;
            height: 148px;
            background: #333333;
            margin: 0 auto;
            position: relative;
            overflow: hidden;

            &::after {
                content: '';
                height: 150%;
                width: 25px;
                background: #fff;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                opacity: 0.6;
                filter: blur(6px);
                animation: move 2s infinite ease-out;
            }
        }

        @keyframes move {
            0% {
                transform: translate(-200px, -200px) rotate(45deg);
            }

            100% {
                transform: translate(200px, 200px) rotate(45deg);
            }
        }
    </style>
</head>

<body>
    <div class="flash-container">
        <img src="https://img-blog.csdnimg.cn/180fbfb5f0434211b3e8640891ecea33.gif" alt />
    </div>
</body>

</html>